<template>
	<view>
		<view class="topbox">
			<view class=""
				style="background-color: #fff;display: flex;border-radius: 40rpx;padding: 15rpx;justify-content: space-between;align-items: center;">
				<input type="text" placeholder="请输入患者姓名/手机号" style="margin-left: 20rpx;" v-model="keywords"
					@input="searchval" />
				<image src="../../static/myGroup/suosou.png" mode=""
					style="width: 40rpx;height:40rpx;margin-right: 20rpx;"></image>
			</view>
		</view>
		<view class="" style="padding: 30rpx;">
			<view class="" style="border-left: 3px solid #1262DB;padding-left: 20rpx;font-weight: bold;">
				患者列表
			</view>
			<view class="" style="display: flex;justify-content: space-between;margin-top: 30rpx;"
				v-for="(item,index) in datalist" v-if="datalist.length > 0">
				<view class="" style="display: flex;">
					<view class="">
						<image style="width: 160rpx;height: 160rpx;border-radius: 50%;" :src="url + item.avatar"
							mode=""></image>
					</view>
					<view class="" style="margin-left: 30rpx;display: flex;flex-direction: column;">
						<view class="" style="font-size: 26rpx;">
							患者名称：{{item.nickname}}
						</view>
						<view class="small_text">
							手机号码：{{item.mobile}}
						</view>
						<view class="small_text">
							年龄：{{item.age}}岁
						</view>
						<view class="small_text">
							身高：{{item.hz_height}}cm
						</view>
						<view class="small_text">
							体重：{{item.hz_weight}}kg
						</view>
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column-reverse;">
					<view class="see_btn" @click="see_detail(item.id)">
						查看详情
					</view>
				</view>
			</view>
			<view class="" v-else>
				<image src="../../static/incomeDetail/wushiju.png" mode=""></image>
			</view>
			<view class="xian"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				icons: [
					'wechatimg/zl1.png',
					'wechatimg/zl2.png',
					'wechatimg/zl3.png',
					'wechatimg/zl4.png',
				],
				keywords: '',
				datalist: [],
				page: 1
			}
		},
		onLoad() {
			this.getdata()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getdata(); // 当触底时加载更多数据

		},
		methods: {
			searchval() {
				this.page = 1
				this.datalist = []
				this.getdata()
			},
			see_detail(id) {
				uni.navigateTo({
					url: '/pages/clinic/patient_detail?id=' + id
				})
			},
			getdata() {
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/device/patient_list',
					method: 'POST',
					data: {
						clinic_id: uni.getStorageSync('clinic_id'),
						keyword: that.keywords,
						page: that.page
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.datalist = that.datalist.concat(result.data.data)
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.topbox {
		padding: 30rpx;
		background-color: #1262DB;
	}

	.choice {
		color: #fff;
		font-weight: bold;
		border-bottom: 2px solid #fff;
		padding-bottom: 10rpx;
	}

	.cds {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0px auto;
		margin-top: 15px;
		color: #a7bbed;
		width: 93%;
	}

	.ccc {
		width: 30%;
		height: 227rpx;
		margin: 0px auto;
		margin-top: 30%;
	}

	.xian {
		border-bottom: 1px solid #e2e2e2;
		margin: 30rpx 0rpx;
	}

	.btn_b {
		border: 2px solid #1262DB;
		padding: 10rpx 20rpx;
		color: #1262DB;
		font-size: 28rpx;
		border-radius: 15rpx;
	}

	.btn_c {
		background: #1262DB;
		color: #fff;
		width: 100%;
		padding: 20rpx;
		text-align: center;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}

	.small_text {
		font-size: 24rpx;
		color: #999999;
	}

	.see_btn {
		border: 1px solid #1262DB;
		border-radius: 15rpx;
		padding: 10rpx 20rpx;
		color: #1262DB;
	}

	.xian {
		border-bottom: 1px solid #e1e1e1;
		margin: 20rpx 0rpx 20rpx 0rpx;
	}
</style>